<template>
  <div class="message-table-container">
    <!-- 查询区域 -->
    <div class="search-bar">
      <el-input
        v-model="searchUsername"
        placeholder="发送者用户名"
        clearable
        style="width: 200px"
      />
      <el-button type="primary" @click="handleSearch">查询</el-button>
    </div>
    <!-- 表格区域 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column
        prop="id"
        label="Id"
        width="80"
      />
      <el-table-column
        prop="title"
        label="标题"
      />
      <el-table-column
        prop="content"
        label="内容"
      />
      <el-table-column
        prop="sender"
        label="发送人"
      />
      <el-table-column
        prop="receiver"
        label="接收人"
      />
      <el-table-column
        prop="readCount"
        label="已读数"
        width="80"
      />
      <el-table-column
        prop="receiverCount"
        label="接收人数"
        width="80"
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
      />
    </el-table>
    <!-- 分页区域 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 20px; text-align: right"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 模拟接口请求，实际项目中替换成真实的接口调用（如 axios 等）
const mockFetchData = (searchUsername, page, pageSize) => {
  // 这里只是模拟返回数据，你需要根据实际情况对接后端接口
  return new Promise((resolve) => {
    const mockData = [
      {
        id: 19,
        title: '6666',
        content: '666666',
        sender: 'admin',
        receiver: 'admin',
        readCount: 0,
        receiverCount: 1,
        createTime: '2025-07-02 07:24:05'
      },
      {
        id: 18,
        title: '666',
        content: '555',
        sender: 'admin',
        receiver: 'student',
        readCount: 0,
        receiverCount: 1,
        createTime: '2025-07-02 07:23:38'
      },
      // 可继续添加更多模拟数据...
    ];
    // 模拟根据查询条件、分页参数筛选数据，实际要和后端配合处理
    const filteredData = mockData.filter(item =>
      item.sender.includes(searchUsername)
    );
    const start = (page - 1) * pageSize;
    const end = start + pageSize;
    resolve({
      list: filteredData.slice(start, end),
      total: filteredData.length
    });
  });
};

const searchUsername = ref('');
const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 查询方法
const handleSearch = async () => {
  currentPage.value = 1; // 查询时重置页码为第一页
  await fetchTableData();
};

// 获取表格数据方法
const fetchTableData = async () => {
  const res = await mockFetchData(searchUsername.value, currentPage.value, pageSize.value);
  tableData.value = res.list;
  total.value = res.total;
};

// 每页条数改变
const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchTableData();
};

// 当前页码改变
const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchTableData();
};

// 初始化加载数据
fetchTableData();
</script>

<style scoped>
.message-table-container {
  padding: 20px;
}
.search-bar {
  display: flex;
  align-items: center;
}
</style>
